<template>
  <div class='logs'>
    <div class="header">
      <div class="left">
        <div class="title">系统日志</div>
        <div class="button">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="center"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="getDate"
          >
          </el-date-picker>
          <el-button
            icon="el-icon-refresh"
            @click="reset"
          >重置</el-button>
        </div>
      </div>
      <div class="right">
        <search-input @searchResult="search"></search-input>
      </div>
    </div>
    <div class="container">
      <el-table
        ref="tableData"
        :data="tableData"
        style="width: 100%"
        max-height="500"
      >
        <el-table-column
          prop="operTime"
          label="时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="operName"
          label="用户"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="businessTypeData"
          label="操作类型"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operData"
          label="操作内容"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <Pagination
        :total="total"
        @pagination="onPaginationChange"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import { getLogs, getData } from '@/api/data';
export default {
  name: 'Logs',
  data() {
    return {
      searchData: {
        keyword: '',
        pageNum: 1,
        pageSize: 10,
        beginDate: '',
        endDate: ''
      },
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      tableData: [],
      total: 0
    };
  },
  methods: {
    search(val) {
      this.searchData.keyword = val
      this.getData()
    },
    onPaginationChange({ page, limit }) {
      this.searchData.pageNum = page
      this.getData()
    },
    getDate() {
      this.searchData.beginDate = this.date[0]
      this.searchData.endDate = this.date[1]
      this.getData()
    },
    async getData() {
      getLogs(this.searchData).then(res => {
        this.tableData = res.data.data
        this.total = res.data.total
      }).catch(err => {
        this.tableData = []
        this.total = 0
      })
    },
    reset() {
      this.date = ''
      this.searchData.beginDate = ''
      this.searchData.endDate = ''
      this.getData()
    }
  },
  created() {
    this.getData()
  }
}
</script>
<style lang='scss'>
.logs {
  padding: 36px 42px;

  .header {
    display: flex;
    justify-content: space-between;

    .left {
      .title {
        height: 26px;
        line-height: 26px;
        font-size: 26px;
        color: #333333;
      }

      .button {
        margin-top: 36px;
        display: flex;
        height: 48px;

        .el-button {
          font-size: 16px;
          font-weight: bold;
          width: 112px;
          height: 48px;
          border-radius: 12px;
          border: 1px solid #E4E4E4;
        }

        .el-date-editor {
          margin-right: 30px;
          height: 48px;
          border-radius: 12px;
          border: 1px solid #E4E4E4;

          .el-input__icon {
            margin-top: 4px;
            font-size: 16px;
          }

          .el-range-separator {
            line-height: 40px;
          }
        }
      }
    }

    .right {
      height: 66px;
      line-height: 66px;
    }
  }

  .container {
    margin-top: 24px;
    width: 100%;
    height: 688px;
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);

    .el-table {
      height: 688px;
      max-height: 100% !important;
      font-size: 16px;

      &::before {
        height: 0;
      }

      .el-table__header-wrapper {
        .el-table__header th {
          padding: 0;
          height: 84px;
          line-height: 84px;
          background-color: #F7FAFF;
          font-size: 18px;
          border: none;
        }
      }

      .el-table__body-wrapper {
        height: 600px;
        max-height: 100% !important;

        tr {
          height: 80px;

          &:hover {
            td.el-table__cell {
              box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);
              background: #FFFFFF;
            }
          }
        }
      }
    }
  }
}

.el-picker-panel {
  .el-picker-panel__body-wrapper {
    .el-picker-panel__body {
      .el-date-range-picker__time-header {
        .el-input__inner {
          padding-left: 16px;
          width: 144px;
          height: 32px;
        }
      }
    }
  }
}
</style>